<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/config.js"></script>
</head>
<body>
    <script type="importmap">
    {
        "imports": {
          "tslib": "../node_modules/tslib/tslib.es6.js"
        }
    }
    </script>
    <script type="module">

        if (typeof process === 'undefined' || !process.env) {
            window.process = {
                env: {
                    NODE_ENV: 'development'
                }
            };
        }

        import * as zrender from '../index.js';
        // 初始化zrender
        var zr = zrender.init(document.getElementById('main'), {
            renderer: window.__ZRENDER__DEFAULT__RENDERER__
        });

        zr.add(new zrender.Sector({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: -Math.PI / 2,
                endAngle: -Math.PI / 2,
                r0: 50,
                r: 100
            }
        }));

        zr.add(new zrender.Sector({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 0,
                endAngle: 0,
                r0: 50,
                r: 100
            }
        }));

        zr.add(new zrender.Sector({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI / 2,
                endAngle: Math.PI / 2,
                r0: 50,
                r: 100
            }
        }));

        zr.add(new zrender.Sector({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI,
                endAngle: Math.PI,
                r0: 50,
                r: 100
            }
        }));

        zr.add(new zrender.Sector({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 0,
                endAngle: 0,
                r0: 50,
                r: 100,
                // cornerRadius: 10,
                // innerCornerRadius: 10,
                cornerRadius: [10, 10]
            }
        }));

        // should be collapsed to a line
        zr.add(new zrender.Sector({
            position: [100, 300],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 0.6981317007977319,
                endAngle: 0.6981317007977318,
                r: 100,
                //clockwise: false
            }
        }));

        zr.add(new zrender.Sector({
            position: [100, 550],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI * 2,
                endAngle: -1,
                cornerRadius: 20,
                r: 100,
                //clockwise: false
            }
        }));

        zr.add(new zrender.Sector({
            position: [400, 150],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI * -160 / 180,
                endAngle: Math.PI * -20 / 180,
                r0: 50,
                r: 140,
                cornerRadius: [5, 15, 0, 70],
                // clockwise: false
            }
        }));

        zr.add(new zrender.Sector({
            position: [400, 350],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI * -160 / 180,
                endAngle: Math.PI * -20 / 180,
                r0: 50,
                r: 140,
                cornerRadius: [0, 0, 0, 20]
            }
        }));

        zr.add(new zrender.Sector({
            position: [400, 550],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI * -160 / 180,
                endAngle: Math.PI * -20 / 180,
                r: 140,
                cornerRadius: [0, 0, 35, 20]
            }
        }));

        // should be a circle
        zr.add(new zrender.Sector({
            position: [650, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: -1.570796326794896,
                endAngle: 4.712388980384691,
                r: 100,
                // clockwise: false
            }
        }));

        // should be collapsed to a line
        zr.add(new zrender.Sector({
            position: [650, 250],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 1.0001,
                endAngle: 1,
                r: 100,
                // clockwise: false
            }
        }));

        // should be nearly a circle
        zr.add(new zrender.Sector({
            position: [650, 500],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 1.0002,
                endAngle: 1,
                r: 100,
                // clockwise: false
            }
        }));

        // should show nothing
        zr.add(new zrender.Sector({
            position: [400, 650],
            scale: [1, 1],
            style: {
                stroke: 'black',
                lineWidth: 10
            },
            shape: {
                startAngle: NaN,
                endAngle: NaN,
                r: 100
            }
        }));
    </script>
    <div id="main" style="width:1000px;height:800px;"></div>
</body>
</html>